<template>
  <div>
    <!-- <div><tabs :keyData="keyData" :tableData="tableData" /></div>
    <div>
      <dynamic-form :dataUire="formConfig"></dynamic-form>
    </div> -->
    <div class="pt-2 pb-2">
      <el-button type="primary" size="mini" @click="addRouter">添加</el-button>
    </div>
    <tabs :keyData="keyData" :tableData="tableData">
      <template #icon0="{ row }">
        <i :class="row.icon" class="iconfont"></i>
      </template>

      <template #center="{ row }">
        <el-button type="text" @click="modify(row)">修改</el-button>
        <el-button type="text" @click="temporaryFun(row)">删除</el-button>
      </template>
    </tabs>
<delInformation ref="delInformation" @delcallback="delRouter"/>
    <div>
      <!-- 弹出层 -->
      <el-dialog :visible.sync="dialogVisible" width="35%" >
        <div class="wid-12" v-if="dialogVisible">
          <dynamic-form :dataUire="formConfig" button_show :formData="formData">
            <template #icon0="{ row }">
              <!-- {{ row }} -->
              <div class="flex bodys">
                <div :class="{ 'bodyStyle': munsIndex === 0 }" @click="iconFun(-1, '')">
                  <span> 无</span>
                </div>
                <div :class="{ 'bodyStyle': munsIndex === index + 1 }" class="pl-1 pr-1"
                  v-for="(item, index) in iconData" @click="iconFun(index, item)">
                  <div class="iconfont" :class="item"></div>
                </div>
              </div>
            </template>

            <template #center="{ row }">
              <div class="bodysButton flex">
                <div>
                  <el-button type="primary" size="small" @click="submit(row)">确认</el-button>
                </div>
                <div class="pl-10">
                  <el-button type="info" size="small" @click="dialogVisible = false">取消</el-button>
                </div>
              </div>
            </template>
          </dynamic-form>
        </div>

      </el-dialog>
    </div>
  </div>
</template>

<script>
import tabs from "@/components/tab/index";
import delInformation from "@/components/delInformation";
import dynamicForm from "@/components/dynamic-form/index";
import { getDataList, routAdd,routEdit,routDel } from "@/api/routerData";
import moment from "moment";
import { processValue } from "@/assets/uilt";
export default {
  components: {
    tabs, // 使用对象语法引入组件，确保与组件名一致
    dynamicForm,
    delInformation
  },
  data() {
    return {
      dialogVisible: false,
      munsIndex: 0,
      formData: { icon: "" },
      formConfig: [
        { key: "pid", name: "父级id", type: "select_a", children: [] },
        { key: "menuname", name: "路由名称", type: "text" },
        { key: "path", type: "text", name: "路由地址" },
        { key: "icon0", type: "slot", name: "路由图标", },

      ],
      keyData: [
        { name: "创建时间", key: "createdAt" },
        { name: "图标", key: "slot",slotName:"icon0" },
        { name: "路由名称", key: "menuname" },
        { name: "路由地址", key: "path" },
        { name: "父级id", key: "pid" },
        { name: "创建者", key: "userOpenId" },
      ],
      tableData: [],
      iconData: [
        "li-icon-shangchengxitongtubiaozitihuayuanwenjian91",
        "icon-cat-skuQuery",
        "li-icon-gongsiguanli",
        "li-icon-shujujiankong",
        "icon-order-manage",
        "li-icon-zhifuguanli",
        "li-icon-xiangmuguanli",
        "icon-cat-skuBasic",
        "li-icon-dingdanguanli",
        "icon-provider-manage",
        "icon-cat-skuInfo",
        "icon-cms-refri",
        "icon-promotion-manage",
        "icon-news-manage",
        "icon-cus-manage",
        "icon-cs-manage",
        "li-icon-zhifupeizhi1",
        "icon-cms-manage",
        "li-icon-jichuguanli",
      ],
      delShow:false,
      temporary:{}
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    temporaryFun(row){
      this.temporary = row
      this.$refs.delInformation.delShowFun()
    },
    iconFun(index, e) {
      this.munsIndex = index + 1
      this.formData.icon = e
    },
    async getDataList() {
      // processValue
      let arr = [{ value: 0, "label": '主菜单' }];
      let res = await getDataList();
      this.tableData = res.map((item) => {
        item.createdAt = moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss");
        if (item.pid === 0) {
          let obj = {
            value: item.id,
            label: item.menuname,
          };
          arr.push(obj);
        }
        return item;
      });
      let data = processValue({ data: this.formConfig, key: "pid", parameter: arr });
      console.log(data);
    },
    addRouter() {
      this.munsIndex = 0
      this.formData = { icon: "" }
      this.dialogVisible = true;
    },
    async submit(e) {
      let obj = {
        ...this.formData,
        ...e
      }
     
      if (e.id) {
        
         await routEdit(e.id,obj)
         this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.getDataList()
        return  this.dialogVisible = true;
      }
      await routAdd(obj)
      this.$message({
          message: '操作成功',
          type: 'success'
        });
        this.dialogVisible = true;
        this.getDataList()
    },
    modify(e) {
      this.dialogVisible = true;
      this.formData = e
      this.munsIndex = this.iconData.indexOf(e.icon) + 1
    },
    async delRouter(){
     let res = await routDel(this.temporary.id)
  //  this.
     this.getDataList();
    }
  },
};
</script>

<style scoped>
@import url("./../../assets/scss/index.css");

.bodys {
  flex-wrap: wrap;
}

.bodyStyle {
  border: 1px dashed rgb(0, 73, 62);
  padding: 0 2px;
}

.bodysButton button {
  width: 100px;
}
</style>
